<template>
  <div>
    <!-- <van-tabbar v-model="alarmType" :fixed="false" style="height:65px;" @change="changeAlarmType">
      <van-tabbar-item icon="all-tabbar">全部</van-tabbar-item>
      <van-tabbar-item icon="fire-tabbar">火警</van-tabbar-item>
      <van-tabbar-item icon="breakdown-tabbar">故障</van-tabbar-item>
    </van-tabbar> -->
    <div class="selection-bar">
      <!-- <div @click="buildingChoose">
      <van-icon name="address"  />&nbsp {{smkBuildingName}}</div>-->
      <div @click.stop="alarmStatChoose">
        {{alarmStatTxt}}&nbsp
        <van-icon name="arrow-right" />
      </div>
      <div @click.stop="searchPanelOpen">
        <van-icon name="arrow-left" />&nbsp 搜索框
      </div>
    </div>
    <!-- <div class="alarm"> -->
    <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="true"
      :offset="300"
      finished-text="没有更多了"
      @load="loadMore"
    >
      <van-cell
        v-for="(item, index) in items"
        :key="index"
        is-link
        :to="{ path: 'alarm-detail',name:'alarm-detail', query: item}"
      >
        <template slot="icon">
          <div class="alarm-icon">
            <van-icon v-if="item.alarmType===1" name="early-warning" size="24px" />
            <van-icon v-else-if="item.alarmType===2" name="fire" size="24px" />
            <van-icon v-else name="breakdown" size="24px" />
          </div>
        </template>
        <template>
          <div style="display: flex;justify-content:space-between;padding-bottom:5px;">
            <div>
              <div>
                <span class="shopName">{{item.shopName}}</span>
                &nbsp>&nbsp{{item.devName}}
              </div>
              <div class="van-cell-text alarm-detail">{{item.alarmDetail}}</div>
              <div class="alarm-date">{{item.alarmDate}}</div>
            </div>
            <div
              style="display: flex;align-items:center;margin-right:15px;min-width:30px;"
              :style="{'color':item.alarmStat===1?'#db3d3c':'#01b84c'}"
            >{{item.alarmStat===1?'未确认':'已确认'}}</div>
          </div>
        </template>
      </van-cell>
    </van-list>

    <is-empty v-if="isEmpty">暂无报警信息</is-empty>

    <transition name="fade">
      <van-icon name="back-top" class="backTop" @click.native="backTop" v-show="showArrow" />
    </transition>

    <!-- </div> -->
    <!-- <van-actionsheet v-model="buildingComboShow" :actions="buildingCombo" @select="onSelectBuilding" /> -->
    <van-actionsheet
      v-model="alarmStatComboShow"
      :actions="alarmStatCombo"
      @select="onSelectAlarmStat"
      cancel-text="取消"
      lazy-render="true"
    />
    <van-popup v-model="searchPanelShow" position="top" :overlay="true">
      <van-cell-group>
        <van-field v-model="searchShopName" clearable label="店铺名" placeholder="请输入店铺名" />
        <van-field v-model="searchImei" center clearable label="IMEI" placeholder="请输入IMEI" />
      </van-cell-group>
      <div class="submit-button">
        <van-button size="large" type="danger" @click="doSearch">确认</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mediaURL } from "@/config";
import { mapState } from "vuex";
import wx from "weixin-js-sdk";
import { getAlarmPagedList } from "./../../api/alarm";
import { getShopList } from "./../../api/shop";
// import loadMore from "@/mixin/list-load-more";
import scrollFixed from "@/mixin/scroll-fixed";
import IsEmpty from "@/components/is-empty/";
import { throttle } from "@/libs/util";
export default {
  mixins: [scrollFixed],
  data() {
    return {
      showArrow: false,
      alarmType: 0,
      alarmStatComboShow: false,
      buildingComboShow: false,
      alarmStatCombo: [
        { key: 0, name: "全部状态" },
        { key: 1, name: "未确认" },
        { key: 2, name: "已确认" }
      ],
      // buildingCombo: [{ id: 0, name: "全部单位" }],
      // smkBuildingId: 0,
      alarmStat: 0,
      searchPanelShow: false,
      searchShopName: "",
      searchImei: "",
      pages: {
        perPage: 10,
        currPage: 1,
        pageCount: 1
      },
      items: [],
      loading: false,
      finished: false,
      isEmpty: false
    };
  },
  computed: {
    ...mapState({
      // 箭头函数可使代码更简练
      wxName: state => state.user.wxName,
      mobile: state => state.user.mobile
    }),
    // smkBuildingName: function() {
    //   return this.buildingCombo.find(a => a.id == this.smkBuildingId).name;
    // },
    alarmStatTxt: function() {
      return this.alarmStatCombo.find(a => a.key == this.alarmStat).name;
    }
  },
  watch: {},

  created() {
    this.scrollShowArrow = throttle(this.scrollShowArrow, 100);
    // this.getShopCombo();
  },
  mounted() {
    this.eventListen(true);
  },
  activated() {
    this.eventListen(true);
  },

  deactivated() {
    this.eventListen(false);
  },

  methods: {
    doSearch() {
      this.resetInit();
    },
    resetInit() {
      this.finished = true;
      let me = this;
      setTimeout(function() {
        me.items = [];
        me.pages = {
          perPage: 10,
          currPage: 1,
          pageCount: 1
        };
        me.finished = false;
        me.loading = false;
      }, 100);
    },
    loadMore() {
      let params = {
        current: this.pages.currPage,
        size: this.pages.perPage,
        // alarmType: this.alarmType == 0 ? this.alarmType : this.alarmType + 1,
        alarmType: 1,
        alarmStat: this.alarmStat,
        start: "",
        end: "",
        shopName: this.searchShopName,
        imei: this.searchImei
      };
      getAlarmPagedList(params).then(res => {
        if(res.data.total==0){
           this.loading = false;
           this.finished = true;
           return
        }
        const items = res.data.records;
        // const page = {
        //   totalCount: res.data.total,
        //   pageCount: Math.ceil(res.data.total / this.pages.perPage)
        // };
        this.pages.pageCount = Math.ceil(res.data.total / this.pages.perPage);
        this.items.push(...items);
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.pages.currPage == this.pages.pageCount) {
          this.finished = true;
        } else {
          this.pages.currPage += 1;
        }
      });
    },
    changeAlarmType() {
      this.resetInit();
    },
    eventListen(isBind = true) {
      if (isBind) {
        this.$el.addEventListener("scroll", this.scrollShowArrow);
      } else {
        this.$el.removeEventListener("scroll", this.scrollShowArrow);
      }
    },
    scrollShowArrow() {
      this.showArrow = this.$el.scrollTop > 120;
    },
    backTop() {
      this.$el.scrollTop = 0;
    },
    // async getShopCombo() {
    //   let res = await getShopList({});
    //   if (res.code === 0) {
    //     this.buildingCombo.push(...res.data);
    //   } else {
    //     this.$toast.fail(res.msg);
    //   }
    // },
    // buildingChoose() {
    //   this.buildingComboShow = true;
    // },
    alarmStatChoose() {
      this.alarmStatComboShow = true;
    },
    // onSelectBuilding(item) {
    //   this.buildingComboShow = false;
    //   this.smkBuildingId = item.id;
    // },
    onSelectAlarmStat(item) {
      this.alarmStatComboShow = false;
      this.alarmStat = item.key;
      this.resetInit();
    },
    searchPanelOpen() {
      this.searchPanelShow = true;
    }
  },

  components: {
    IsEmpty
  }
};
</script>


<style lang="scss" scoped>
@import "./../../../../assets/scss/mixin";
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
div.van-tabbar-item--active {
  color: #f8b728;
}
.backTop {
  position: fixed;
  right: 20px;
  bottom: 80px;
  font-size: 24px;
}
.selection-bar {
  display: flex;
  justify-content: space-between;
  background-color: #bbb;
  font-size: 12px;
  & > div {
    padding: 8px 10px;
    color: #333;
  }
}

.shopName {
  font-weight: 800;
}
.alarm-icon {
  display: flex;
  align-items: center;
  padding-right: 12px;
}
.alarm-detail {
  font-size: 16px;
  color: #000;
}
.alarm-date {
  color: #666;
  font-size: 12px;
}

.van-swipe-cell {
  &__left,
  &__right {
    color: #ffffff;
    font-size: 14px;
    height: 100%;
    display: inline-block;
    text-align: center;
    display: flex;
    align-items: center; /*垂直居中*/
    justify-content: center; /*水平居中*/
    background-color: #f44;
  }
}
.van-button__text {
  width: 100%;
}
</style>
